<template>
  <template v-if="noLeft">
    <slot name="split-right"></slot>
  </template>
  <template v-else>
    <div ref="splitContent" class="split-content">
      <div
        v-show="showLeft"
        ref="leftPanel"
        :style="leftStyle"
        class="split-left-content"
      >
        <slot name="split-left"></slot>
      </div>
      <div class="split-line">
        <div v-show="showLeft" class="line" @mousedown="splitMouseDown"></div>
        <div
          class="fold-btn"
          :class="{ 'show-left': showLeft }"
          @click="handleShowLeft"
        >
          <span class="icon"></span>
        </div>
      </div>
      <div ref="rightPanel" class="split-right-content">
        <slot name="split-right"></slot>
      </div>
    </div>
  </template>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { throttle } from '@/common/utils';

  const props = defineProps({
    noLeft: {
      type: Boolean,
      default: true,
    },
    size: {
      type: Number,
      default: 0.3,
    },
    min: {
      type: Number,
      default: 0.1,
    },
    max: {
      type: Number,
      default: 0.4,
    },
  });
  const leftPanel = ref(null);
  const rightPanel = ref(null);
  const splitContent = ref(null);
  const showLeft = ref(true);
  const offsetVal = ref(props.size);
  const leftStyle = ref(`flex: 0 0 calc(${props.size * 100}% - 3px)`);
  let startX;
  let startXP;
  const resizePanelFun = throttle(resizePanel, 20);
  const splitMouseDown = (e) => {
    startX = splitContent.value.getBoundingClientRect().x;
    startXP = (e.pageX - startX) / offsetVal.value;
    document.addEventListener('mousemove', resizePanelFun);
    document.addEventListener('mouseup', stopResize);
  };
  // 调整panel宽度的函数
  function resizePanel(e) {
    let offset = (e.pageX - startX) / startXP;
    if (offset < props.min) {
      offset = props.min;
    }
    if (offset > props.max) {
      offset = props.max;
    }
    offsetVal.value = offset;
    leftStyle.value = `flex: 0 0 calc(${offset * 100}% - 3px)`;
  }

  // 停止调整panel宽度的函数
  function stopResize() {
    document.removeEventListener('mousemove', resizePanelFun);
    document.removeEventListener('mouseup', stopResize);
  }

  const handleShowLeft = () => {
    showLeft.value = !showLeft.value;
  };
</script>

<style lang="less" scoped>
  .split-content {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 100%;
    .split-left-content {
      flex: 0 0 calc(20.8936% - 3px);
      height: 100%;
      padding: 16px;
    }
    .split-right-content {
      flex: 1;
      height: 100%;
      padding: 16px;
    }
    .split-line {
      position: relative;
      .line {
        width: 1px;
        height: 100%;
        background: #ccc;
        padding: 0 1px;
        &:hover,
        &:active {
          border-left: 2px solid rgb(var(--primary-6));
          border-right: 2px solid rgb(var(--primary-6));
          cursor: col-resize;
        }
      }
      .fold-btn {
        position: absolute;
        top: 24px;
        width: 16px;
        height: 32px;
        background: #fff;
        left: 0;
        border-radius: 0px 8px 8px 0px;
        border: 1px solid #e4e7ed;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-content: center;
        cursor: pointer;
        .icon {
          width: 10px;
          height: 10px;
          border-bottom: 2px solid #596272;
          border-left: 2px solid #596272;
          transform: rotateZ(-135deg);
        }
        &.show-left {
          left: -16px;
          border-radius: 8px 0px 0px 8px;
          .icon {
            border-left: unset;
            border-right: 2px solid #596272;
            transform: rotateZ(135deg);
            margin-left: 4px;
          }
        }
        &:hover {
          border: 1px solid rgb(var(--primary-6));
        }
      }
    }
  }
</style>
